<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"/>
    <link rel="stylesheet" type="text/css" href="../../common/style/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../common/style/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="../../common/style/select.css" />
    <script src="../../common/lib/jquery-1.11.2.min.js"></script>
    <script src="../../common/lib/area.js"></script>
    <script type="text/javascript" src="../../common/js/md5.js"></script>
    <script src="../../common/js/vue.min.js"></script>
    <script src="../../common/js/axios.min.js"></script>
    <script type="text/javascript" src="../../common/request/request.js?version=1.0.12" ></script>
    <script src="../../common/lib/iscroll.js"></script>
    <script src="./search_js/search-result-house.js?version=1.0.12"></script>
    <script src="../../common/lib/better-scroll/bscroll.min.js"></script>
    <style>
      .second-select li a span {
          display: inline-block;
          max-width: 80%;
          white-space: nowrap;
          overflow: hidden;
          vertical-align: bottom;
          text-overflow: ellipsis;
      }
      .loadMore{
            text-align: center;
            margin: .4rem;
        }
        .loadMore .aui-btn{
            font-size: 0.6rem;
            background-color: #38B3FF;
        }
      .third-info #left-area,.third-info .list{
            overflow: hidden;
        }
    </style>
  </head>

  <body class="layout-w" id="house">
    <div class="select-header aui-clearfix">
      <div class="aui-pull-left" style="width:40%;">
        <a href="javascript:;" class="select-index-button active"
          >写字楼/园区</a
        >
      </div>
      <div class="aui-pull-left" style="width:40%;">
        <a href="search-result-community.html" class="select-index-button">联合办公</a>
      </div>
      <div class="aui-pull-left" style="width: 20%;">
        <a href="entry.html?type=3" class="small-select">
          <i class="fa fa-search"></i>&nbsp;搜索
        </a>
      </div>
    </div>
    <div class="main-select">
      <div class="aui-tab" id="select-tab">
        <a class="aui-tab-item aui-active" href="search-result-build.html">按楼盘显示</a>
        <a class="aui-tab-item" href="search-result-house.html">按房源显示</a>
      </div>
      <div class="select-content">
        <div class="second-select">
          <ul class="aui-clearfix" id="all-select">
              <li data-type="choose-area"><a href="javascript:;"><span>{{selectBar.area}}</span><i class="fa fa-caret-down"></i></a></li>
              <li data-type="choose-subway"><a href="javascript:;"><span>{{selectBar.subway}}</span><i class="fa fa-caret-down"></i></a></li>
              <li data-type="choose-sort"><a href="javascript:;"><span>{{selectBar.sort}}</span><i class="fa fa-caret-down"></i></a></li>
              <li data-type="choose-select"><a href="javascript:;"><span>筛选</span><i class="fa fa-caret-down"></i></a></li>
          </ul>
        </div>
        <!-- <div class="aui-list only-company">
          <label
            ><input class="aui-checkbox" type="checkbox" id="only-company" v-model="byCompany" @click="switchByCompany" />
            按公司显示</label
          >
        </div> -->
      </div>
      
      <div class="third-info" style="display:none;" id="choose-area">
            <div id="left-area">
              <ul>
                <!-- <li class="active">
                  <a href="javascript:;" data-type="area-nearby">附近</a>
                </li>
                <li><a href="javascript:;" data-type="area-hot">热门商圈</a></li> -->
                <li :class="[query.townId == area.item_id ?'active':'']" v-for="area in areaList"
                :key="area.item_id"><a href="javascript:;" data-type="area-1" @click="getArea('',area)" v-html="area.item_name"></a></li>
              </ul>
            </div>
            <div class="list" id="right-area">
              <div id="area-all">
                <a v-for="business in businessList"
                :class="[(query.tradingAreaId == area.item_id || distance)?'active':'']"
                :key="business.item_id" v-html="business.item_name" @click="getbus(business)"></a>
              </div>
            </div>
          </div>
          <div class="third-info" style="display:none;" id="choose-subway">
            <div id="left-area">
              <ul>
                <!-- <li class="active">
                  <a href="javascript:;" data-type="area-nearby">附近</a>
                </li>
                <li><a href="javascript:;" data-type="area-hot">热门商圈</a></li> -->
                <li :class="[query.subwayLineId == line.item_id?'active':'']" v-for="line in linesList"
                :key="line.item_id"><a href="javascript:;" data-type="area-1" @click="getlines(line)" v-html="line.item_name"></a></li>
              </ul>
            </div>
            <div class="list" id="right-area">
              <div id="area-all">
                <a v-for="linebus in linesbusList"
                :class="[query.subwayStationId == linebus.item_id?'active':'']"
                :key="linebus.item_id" v-html="linebus.item_name" @click="getlibus(linebus)"></a>
              </div>
            </div>
          </div>
          <div class="third-info" style="display:none;" id="choose-sort">
            <a href="javascript:;" class="select-all-grey">全部</a>
            <div class="select-all-list-2 main-list-zx aui-clearfix sort-list">
              <div v-for="item in sortList"  @click="sort(item)"><a href="javascript:;" class="">{{item.name}}</a></div>
            </div>
          </div>
          <div class="third-info" style="display:none;" id="choose-select">
            <a href="javascript:;" class="select-all-grey aui-margin-b-10"
              >全部</a
            >
            <div class="main-list-zx">
              <dl>
                <dt>类型</dt>
                <dd>
                  <a href="javascript:;" :class="[query.gardenFlag == item.id?'active':'']" v-for="item in type" @click="handleChooseSelect('type',item)" class="" v-html="item.name"></a>
                </dd>
              </dl>
              <dl class="for-park" v-show="query.gardenFlag == 1">
                <dt>园区类型</dt>
                <dd>
                  <a href="javascript:;" :class="[query.gardenType == item.id?'active':'']" v-for="item in gardenType" @click="handleChooseSelect('gardenType',item)" class="" v-html="item.name" class="">科技</a>
                </dd>
              </dl>
              <dl>
                <dt>单价（元/m²·天）</dt>
                <dd>
                  <a :class="[query.priceMax == item.max?'active':'']"
                  v-for="item in priceList" href="javascript:;" class="" v-html="item.name" @click="handleChooseSelect('price',item)"></a>
                </dd>
              </dl>
              <dl>
                <dt>面积</dt>
                <dd>
                  <a href="javascript:;" :class="[query.areaMin == item.min?'active':'']"
                  v-for="item in areaLists" class="" v-html="item.name" @click="handleChooseSelect('area',item)"  @click="handleChooseSelect('area',item)"></a>
                </dd>
              </dl>
              <dl>
                <dt>装修</dt>
                <dd>
                  <a :class="[query.fitmentStatus == item.id?'active':'']"
                  v-for="item in decorateLists" href="javascript:;" class="" v-html="item.name" @click="handleChooseSelect('fitmentStatus',item)"></a>
                </dd>
              </dl>
              <dl>
                <dt>楼层</dt>
                <dd>
                  <a  :class="[query.floorNoMin == item.min?'active':'']"
                  v-for="item in floor" href="javascript:;" class="" v-html="item.name" @click="handleChooseSelect('floor',item)"></a>
                </dd>
              </dl>
              <dl>
                <dt>朝向</dt>
                <dd>
                  <a  :class="[query.orientation == item.id?'active':'']"
                  v-for="item in toward" href="javascript:;" class="" v-html="item.name" @click="handleChooseSelect('toward',item)"></a>
                </dd>
              </dl>
              <dl>
                <dt>物业性质</dt>
                <dd>
                  <a :class="[query.managementType == item.id?'active':'']"
                  v-for="item in propertyList" href="javascript:;" class="" v-html="item.name" @click="handleChooseSelect('managementType',item)"></a>
                </dd>
              </dl>
              <!-- <dl>
                <dt>发布方</dt>
                <dd>
                  <a :class="[query.pubulishCompany == item.id?'active':'']"
                  v-for="item in theissuer" href="javascript:;" v-html="item.name" @click="handleChooseSelect('pubulishCompany',item)"></a>
                </dd>
              </dl> -->
              <dl>
                <dt>热搜标签</dt>
                <dd>
                  <a :class="[query.labelId == hotsearch.tagId?'active':'']"
                  v-for="hotsearch in hotsearchList" href="javascript:;"  v-html="hotsearch.keyword"
                  @click="handleChooseSelect('hotsearch',hotsearch)"></a>
                </dd>
              </dl>
            </div>
            <div class="select-button">
              <a href="javascript:;" class="blue" @click="reset">重置</a>
              <a href="javascript:;" @click="search">确定</a>
            </div>
          </div>
        </div>
      <!-- <div class="aui-bar aui-bar-btn aui-bar-btn-sm aui-bar-btn-full new-house-type-tab">
            <div class="aui-bar-btn-item aui-active">按房源显示</div>
            <div class="aui-bar-btn-item">按公司显示</div>
        </div> -->
      <div v-if="!byCompany">
      <div class="all-list aui-content" v-if="resourceList.length>0">
        <ul class="aui-list aui-list-in">
          <li class="aui-list-item" v-for="resource in resourceList"
          @click="goDetail(resource)">
            <div class="aui-list-item-media">
              <img :src="resource.imgUrl?getImgUrl()+resource.imgUrl:'../../common/images/noupload.png'" />
              <a href="javascript:;" v-if="resource.buildingFlag == 1"><img src="../../common/images/3D.svg"/></a>
            </div>
            <div class="aui-list-item-inner">
              <div class="aui-list-item-text">
                <div
                  class="aui-list-item-title aui-ellipsis-1"
                  style="width:100%;"
                >
                  <!-- <img
                    src="../../common/images/icon-jian.svg"
                    class="icon-jian"
                  /> -->
                  {{ resource.title }}
                </div>
              </div>
              <div class="aui-info" style="padding:.2rem 0 0;">
                <div class="aui-info-item">
                  <span class="mianji"><small v-html="forDate(resource.updateTime)"></small></span
                  >&nbsp;
                  <span class="zhizu-plan" v-show="resource.companyType == 1 || resource.companyType == 2"><small>直租计划</small></span>
                </div>
                <div class="aui-info-item">
                  <span class="blue" v-html="resource.price"></span>&nbsp;<small>元/m²·天</small>
                </div>
              </div>
              <div class="aui-info" style="padding-top:.1rem;">
                <div class="aui-info-item"><small v-html="resource.townName"></small>-<small v-html="resource.tradingArea"></small></div>
                <div class="aui-info-item"><small v-html="houseCollectionNum[$index].count"></small>人收藏</div>
              </div>
              <div class="aui-info" style="padding:.2rem 0 0;">
                <div class="aui-info-item">
                  <a href="javascript:;" class="traffic"
                  v-for="tag in resource.tagNameList"><small v-html="tag"></small></a>
                </div>
                <div class="aui-info-item"><small>浏览量 <small>{{ countVisitsLisst[$index].count }}</small></small></div>
              </div>
            </div>
          </li>
          <li class="loadMore">
              <div class="aui-btn aui-btn-sm aui-btn-primary " v-if="more" @click="loadMore">查看更多</div>
              <small v-else>已加载全部</small>
          </li>
        </ul>
      </div>
      <div class="all-list aui-content" v-else>
          <img src="../../common/images/no-result.svg" style="display: block;margin: 3rem auto;">       
      </div>
    </div>  
    <div v-else>
      <div class="all-list second-list-type aui-content" v-if="companyList.length>0">
            <dl class="aui-margin-t-10" v-for="company in companyList">
                <dt style="position:relative;">
                    <div class="aui-clearfix aui-list-item-arrow">
                        <div class="aui-pull-left" style="text-align:left;width:80%;">
                            <div>
                                <h4 class="title" style="font-size:.8rem;display: inline;" @click="goCompany(company)">{{company.companyName}}</h4>
                                <small class="zhizu-plan" v-if="company.directFlag">直租计划</small>
                            </div>
                            <p style="font-size:.6rem;">
                                <small>{{forDate(company.updateTime)}}</small>&nbsp;&nbsp;<small>销控更新</small>&nbsp;&nbsp;<small>浏览量{{countVisitsLisst2[$index].count}}</small></p>
                        </div>
                        <div class="aui-pull-right tao-num" style="width:19%;">
                            <big>{{company.houseNum}}</big>套
                        </div>
                    </div>
                </dt>
                <dd>
                    <div class="out" v-for="house in company.houseList"  v-if="$index<4">
                        <div class="more-house-list" @click="goDetail1(house)">
                            <div class="pic">
                                <img :src="house.imgUrl?getImgUrl() + house.imgUrl:'../../common/images/noupload.png'">
                                <p class="position-des aui-ellipsis-1"><small>{{house.introduce}}</small></p>
                            </div>
                            <div class="remark aui-clearfix">
                                <div class="line-1 aui-ellipsis-1">{{house.houseTitle}} | 300m²</div>
                                <div class="aui-info">
                                    <div class="aui-info-item"><small>浏览量</small>{{company.houseCountVisits[$index].count}}</div>
                                    <div class="aui-info-item"><big>{{house.price}}</big><small> 元/m²·天</small></div>
                                </div>
                            </div>
                        </div>
                    </div>                    
                </dd>
            </dl>
            <div class="loadMore">
              <div class="aui-btn aui-btn-sm aui-btn-primary " v-if="companyMore" @click="loadMoreCompany">查看更多</div>
              <small v-else>已加载全部</small>
            </div>
      </div>
      <div class="all-list aui-content" v-else>
          <img src="../../common/images/no-result.svg" style="display: block;margin: 3rem auto;">       
      </div>      
    </div>
    </div>
    <a class="back-to-top" href="javascript:;">
      <img src="../../common/images/totop.svg" />
    </a>
    <script src="../../common/lib/aui-tab.js"></script>

    <script type="text/javascript">
      $(document).ready(function() {

          //回到顶部
          window.onscroll = function() {
            var scrollTop =
              document.documentElement.scrollTop ||
              window.pageYOffset ||
              document.body.scrollTop;
            if (scrollTop >= 100) {
              $(".back-to-top").fadeIn();
            } else {
              $(".back-to-top").fadeOut();
            }
          };
          $(".back-to-top").click(function() {
            $("html,body").animate({ scrollTop: "0px" }, 500);
          });
          var tab = new auiTab(
            {
              element: document.getElementById("select-tab"),
              index: 2,
              repeatClick: false
            },
            function(ret) {
              console.log(ret);
            }
          );
        });
        new BScroll("#choose-area>#left-area", {
            click: true,
            scrollY: true
        });
        new BScroll("#choose-area>#right-area", {
            click: true,
            scrollY: true
        });
        new BScroll("#choose-subway>#left-area", {
            click: true,
            scrollY: true
        });
        new BScroll("#choose-subway>#right-area", {
            click: true,
            scrollY: true
        });

        //筛选条件切换
        // $("#all-select li").on("click", function() {
        //   if ($(this).hasClass("active")) {
        //     $(this).removeClass("active");
        //     $(".third-info").hide(100);
        //     $(".all-list").show(100);
        //   } else {
        //     $("#all-select li").removeClass("active");
        //     $(this).addClass("active");
        //     var aimDom = $(this).attr("data-type");
        //     $(".third-info").hide();
        //     $(".all-list").hide(100);
        //     $("#" + aimDom).show(300);
        //     // $("#" + aimDom).slideDown();
        //   }
        // });
        $("#all-select li").on("click", function() {
            var aimDom = $(this).attr("data-type");
            if( $("#" + aimDom).css('display') == 'none'){
                $(".third-info").hide();
                $(".all-list").hide(100);
                $("#" + aimDom).show(300);
            }else{
                $(".third-info").hide(100);
                $(".all-list").show(100);
                $("#" + aimDom).hide(300);
            }
        });
        //排序
        $(".sort-list").on("click", 'a',function() {
          if ($(this).hasClass("active")) { 
            $(this).removeClass("active");
          }else{
            $(this).addClass("active").parent().siblings().children('a').removeClass('active');            
          }
          $(".third-info").hide();
          $(".all-list").show(100);
        });
        //条件选中-取
        $(".main-list-zx a").on("click", function() {
          $(this).toggleClass("active");
          if ($(this).attr("id") == "park") {
            $(".for-park").toggle();
          }
        });
      
    </script>
  </body>
</html>
